<script setup lang="ts">
import fyjk from '~~/public/img/fyjk.png'
import ggaq from '~~/public/img/ggaq.png'
import ggws from '~~/public/img/ggws.png'
import jbcs from '~~/public/img/jbcs.png'
import jksy from '~~/public/img/jksy.png'
import mbfz from '~~/public/img/mbfz.png'
import xljk from '~~/public/img/xljk.png'
import zyys from '~~/public/img/zyys.png'
import { getCategoryList } from '~/api/home'

const router = useRouter()
const navList = ref()
const cateData = [{
    title: '健康素养',
    icon: jksy,
    list: [
        {
            title: '健康知识',

        },
        {
            title: '戒烟限酒',

        },
        {
            title: '科技创新',
        },
        {
            title: '健康技能',
        },
        {
            title: '适量运动',
        },
        {
            title: '其他',
        },
    ],
}, {
    title: '公共卫生',
    icon: ggws,
    list: [
        {
            title: '新冠肺炎',
        },
        {
            title: '传染病预防',
        },
        {
            title: '预防接种',

        },
        {
            title: '地方病预防',

        },
        {
            title: '职业健康',

        },
        {
            title: '环境健康',

        },
        {
            title: '其他',

        },
    ],
}, {
    title: '疾病常识',
    icon: jbcs,
    list: [
        {
            title: '呼吸系统疾病',
        },
        { title: '循环系统疾病' },
        { title: '泌尿系统疾病' },
        { title: '消化系统疾病' },
        { title: '运动系统疾病' },
        { title: '内分泌系统疾病' },
        { title: '神经系统疾病' },
        { title: '口腔健康' },
        { title: '康复护理' },
        { title: '其他' },
    ],
}, {
    title: '妇幼保健',
    icon: fyjk,
    list: [
        {
            title: '儿童保健',
        },
        { title: '妇女保健' },
        {
            title: '孕产保健',

        },
        {
            title: '其他',

        },
    ],
}, {
    title: '慢病防治',
    icon: mbfz,
    list: [
        {
            title: '高血压',
        },
        { title: '高血脂' },
        {
            title: '糖尿病',

        },
        {
            title: '脑卒中',

        },
        {
            title: '慢阻肺',

        },
        {
            title: '哮喘',

        },
        {
            title: '其他',

        },
    ],
}, {
    title: '心理健康',
    icon: xljk,
    list: [
        {
            title: '心理疾病',
        },
        { title: '儿童青少年心理' },
        {
            title: '婚姻家庭',

        },
        {
            title: '社会关系',

        },
        {
            title: '老年心理',

        },
        {
            title: '其他',

        },
    ],
}, {
    title: '中医养生',
    icon: zyys,
    list: [
        {
            title: '中医知识',
        },
        { title: '非药物疗法' },
        {
            title: '情志养生',

        },
        {
            title: '时令养生',

        },
        {
            title: '起居养生',

        },
        {
            title: '运动养生',

        },
        {
            title: '饮食养生',

        },
        {
            title: '其他',

        },
    ],
}, {
    title: '公共安全',
    icon: ggaq,
    list: [
        {
            title: '急救知识',
        },
        { title: '事故灾害' },
        {
            title: '其他',
        },
    ],
}]

const currentCate = ref('')
const currentSubCate = ref('')
const currentSubCateList = computed(() => {
    if (currentCate.value !== '') {
        // const cate = cateData[currentCate.value] || { list: [] }
        return navList.value.find(item => item.classify_name === currentCate.value)
    }
    return null
})
function tohel(path1: any, path2: any) {
    console.log(path1, path2)
    router.push({
        path: '/peopleHealth/knowledge',
        query: {
            // type: `${path1.title}/${path2}`,
            type: `${path1.classify_name}/${path2}`,
        },
    })
}
getData()
function getIcon(name1: any) {
    switch (name1) {
        case '健康素养':
            return jksy
        case '公共卫生':
            return ggws
        case '疾病常识':
            return jbcs
        case '妇幼保健':
            return fyjk
        case '慢病防治':
            return mbfz
        case '心理健康':
            return xljk
        case '中医养生':
            return zyys
        case '公共安全':
            return ggaq
        default:
            break
    }
}
function getData() {
    getCategoryList({
        condition: [{
            colName: 'path_name',
            ruleType: 'like]',
            value: '健康知识%',
        }],
    }).then((res) => {
        navList.value = res.data[0].children
    })
}

const imgs = [
    "/img/zhijian.jpg", "/img/zhijian2.jpg"
]
</script>

<template>
    <div
        class="relative flex py-6 bg-#ffffff max-w-1200px mx-auto px-10 border-2 border-solid border-#AC8358 rounded-10px m-b-10"
        flex="~ col">
        <div flex="~ justify-between place-items-center ">
            <div class="bg-l-image m-l-4 m-t-1">志鉴分类</div>
            <div class="m-r-2 m-t-1">
                <NuxtLink to="/peopleHealth/knowledge">
                    <span class=" text-#977D6A m-1 cursor-pointer">更多</span>
                </NuxtLink>
                <img class="flex-shrink-0 w-25px h-25px inline" src="/img/homeico.png" alt="" />
            </div>
        </div>
        <div flex="~ row" class="m-t-4">
            <div class=" container w-180px" style="box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.1)">
                <div class=" rounded-22px  xl:mb-0 relative" @mouseleave="currentCate = ''">
                    <div>
                        <div class="left">
                            <div v-for="(item, index) in navList" :key="item.classify_name"
                                class="content flex cursor-pointer items-center px-5 py-3 "
                                :class="{ active: currentCate === item.classify_name }"
                                @mouseover="currentCate = item.classify_name">
                                <img :src="getImgUrl(item.classify_name)" alt="" class="mr-10px">
                                <div class="sub-title pr-15px font-bold" text="16px">
                                    {{ item.classify_name }}
                                </div>
                                <div>
                                    >
                                </div>
                                <!-- <ul class="flex  justify-between  w-70%">
                                <li v-for="listItem in item.list" :key="listItem.title"
                                    class="list-decorate list-item lh-34px pr-2" text="14px "
                                    hover="text-#AC8358 cursor-pointer" @mouseenter="currentSubCate = listItem.title">
                                    {{ listItem.title }}
                                </li>
                            </ul> -->
                            </div>
                        </div>
                        <div class="absolute left-180px top-0 w-500px  z-2 h-full">
                            <div v-if="currentSubCateList" class="h-full w-full flex flex-col bg-#ffffffcc p-15px"
                                @mouseleave="currentCate = ''"
                                @mousemove="currentSubCate = currentSubCateList.classify_name">
                                <div class="h-full w-full p-15px">
                                    <div class="item-box" grid="~ cols-2 gap-10px">
                                        <div v-for="subItem in currentSubCateList.children" :key="subItem.classify_name"
                                            class="text-left text-16px line-height-34px"
                                            hover="text-#AC8358 cursor-pointer"
                                            @click="tohel(currentSubCateList, subItem.classify_name)">
                                            <span class="mr-10px inline-block h-5px w-5px bg-#AC8358" />
                                            <span>
                                                {{ subItem.classify_name }}
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex-1">
                <!-- <img :src="'/img/swiper.png'" class=""> -->
                <el-carousel motion-blur h-full height="100%" trigger="click" :autoplay="false">
                    <el-carousel-item v-for="item in imgs" :key="item">
                        <el-image class="h-full w-full" :src="item" fit="fill" />
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>
    </div>
</template>

<style scoped>
.active {
    color: #AC8358;
    border-left: 2px solid #AC8358;
    background-color: rgba(235, 247, 245, 1);
}
.bg-l-image {
    background-image: url('/img/homeBookl.png');
    color: white;
    font-size: 1.6rem;
    width: 200px;
    padding-right: 2.25rem;
    line-height: 3.5rem;
    text-align: center;
    font-family: cursive;
   
  }
</style>
